<template>
	<picker class="my-picker flex c333 fs22 align-center just-sb" :value="valueIndex" :range="dataList" range-key="text" @click="handleShow" @change="change" @cancel="cancel">
		<view>{{valueText ? valueText : placeholder}}</view>
		<image :class="{on:isShow}" src="../static/icon2.png" mode="aspectFill"></image>
	</picker>
</template>

<script>
	export default {
		name: "my-picker",
		props: {
			placeholder: {
				type: String,
				default: '全部'
			},
			list:{
				type:Array,
				default:()=>{
					return [
						// {text:'其他',value:'1'},
					]
				}
			},
			value:'',
		},
		model:{
			prop:'value',
			event:'change'
		},
		data() {
			return {
				isShow:false,
				valueText:'',
				valueIndex:0,
				dataList:[],
			};
		},
		created(){
			this.dataList=[{text:this.placeholder,value:'all_type'},...this.list]
			if(this.value || this.value==0){
				this.valueText=this.dataList?.find(r=>r.value==this.value)?.text
				this.valueIndex=this.dataList.findIndex(r=>r.value==this.value)
			}
		},
		methods: {
			handleShow() {
				this.isShow=true
			},
			change(e){
				this.isShow=false
				let val=this.dataList[e.detail.value].value
				let valText=this.dataList[e.detail.value].text
				this.valueText=valText
				if(val=='all_type'){
					this.$emit('change','')
				}else{
					this.$emit('change',val)
				}
			},
			cancel(){
				this.isShow=false
			}
		},
		watch: {
			list(newValue, oldValue) {
				if(this.dataList.length==1){
					this.dataList=this.dataList.concat(this.list)
				}else{
					this.dataList=[{text:this.placeholder,value:'all_type'},...this.list]
				}
			}
		},
	}
</script>

<style lang="less">
	.my-picker {
		box-sizing: border-box;
		width: 190.28rpx;
		height: 61.11rpx;
		background: #ffffff;
		border: 1.39rpx solid #d8d8d8;
		border-radius: 31.94rpx;
		position: relative;
		padding: 0 28rpx;

		image {
			width: 16.67rpx;
			height: 12rpx;
			position: absolute;
			right: 28rpx;
			top: 50%;
			margin-top: -6rpx;
			transition: all 0.3s;
			&.on{
				transform: rotateZ(180deg);
			}
		}
	}
</style>